C S S   -   Cascading Style Sheets

8.   sonstiges

8.3  hintergrundbild - background-image | -repeat | -position

Ein hintergrundbild kann für die ganze seite (body-tag) oder für ein HTML-element vereinbart werden. Wenn das bild nicht das ganze element füllt, wird es horizontal und vertikal so lange wiederholt (gekachelt), bis das element gefüllt ist. Diese bildwiederholung kann aber ganz oder teilweise verhindert werden.

background-image: url('dateiname'); hintergrundbild
background-repeat: wieder bildwiederholung; für wieder sind folgende angaben möglich
repeatdas bild wird über den ganzen hintergrund wiederholt (standard)
repeat-xdas bild wird über eine hintergrundzeile wiederholt
repeat-ydas bild wird über eine hintergrund-spalte wiederholt
no-repeatdas bild wird nicht wiederholt, d.h. nur einmal angezeigt
background-position: x-pos y-pos horizontale und vertikale bildposition
x-posme left right center masseinheit oder schlüsselwort
y-posme top bottom center masseinheit oder schlüsselwort

Das bild wird an die angegebenen background-position gesetzt und abhängig von den weiteren angaben in verschiedene richtungen wiederholt.

beispiele
Die fünf beispiele zeigen jeweils einen div-container mit einer textzeile und einem hintergrundbild. Bei den beispielen wird hier nur das style-attribut aus dem div-tag gezeigt.

beispiel 1
Das bild wird über die ganze tabelle gekachelt, zufällig passen in den container drei zeilen mit dem bild, allerdings wird es in der letzen spalte abgeschnitten. Die textzeile im container wird von dem bild überlagert, ist aber noch erkennbar.

style="border: 3px blue solid; width: 260px; height: 60px;
       background-image: url('im/n-links.gif')"

textzeile im container

beispiel 2
Auch hier wird das bild über den ganzen container gekachelt, das kacheln geht aber von der position 30px x 50px aus, dadurch sieht das ergebnis etwas anders aus.

style="border: 3px blue solid; width: 260px; height: 60px;
       background-image: url('im/n-links.gif');
       background-position: 30px 50px"

textzeile im container

beispiel 3
Das bild wird nicht gekachelt, sondern nur einmal genau in das zentrum des containers gesetzt.

style="border: 3px blue solid; width: 260px; height: 60px;
       background-image: url('im/n-links.gif');
       background-repeat: no-repeat; background-position: center center"

textzeile im container

beispiel 4
Das bild wird an der horizontalen position 80px über eine spalte gekachelt. Die angabe der vertikalen (zweiten) position entfällt.

style="border: 3px blue solid; width: 260px; height: 60px;
       background-image: url('im/n-links.gif');
       background-repeat: repeat-y; background-position: 80px"

textzeile im container

beispiel 5
Das bild wird an der vertikalen position 25px über eine zeile gekachelt. Die angabe der horizontalen (ersten) position ist nötig, damit die vertikale position als solche erkannt werden kann und das kacheln am linken rand des containers beginnt.

style="border: 3px blue solid; width: 260px; height: 60px;
       background-image: url('im/n-links.gif');
       background-repeat: repeat-x; background-position: 0px 25px"

textzeile im container

zum untermenü

    IMPRESSUM  

    KONTAKT  

    PRIVAT  

    D O K U  


  H T M L  
  c s s
  P H P  
  My S Q L  
  JAVASCRIPT